<template>
  <div class="app-container">
    <!-- 搜索路由 -->
    <search-form></search-form>
    <!-- 路由选项卡 -->
    <!-- <div class="route_tags">
      <el-tabs v-model="activeName"
               type="card"
               @tab-click="handleClick">
        <el-tab-pane label="目录"
                     name="0"></el-tab-pane>
        <el-tab-pane label="页面"
                     name="1"></el-tab-pane>
        <el-tab-pane label="按钮"
                     name="2"></el-tab-pane>
      </el-tabs>
    </div> -->

    <!-- 菜单表格展示 -->
    <div class="menu_tabel_show">
      <el-table :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column align="center"
                         prop="route_title"
                         label="目录标题"
                         width="180">
        </el-table-column>
        <el-table-column align="center"
                         label="图标"
                         width="80">
          <template slot-scope="scope">
            <i :class="scope.row.route_icon"></i>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="route_order"
                         sortable
                         width="140"
                         label="排序">
        </el-table-column>
        <el-table-column align="center"
                         label="api_or_btn">
          <template slot-scope="scope">
            <span>{{scope.row.route_btn == ''? scope.row.route_api : scope.row.route_btn}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="route_url"
                         label="组件路径">
        </el-table-column>
        <el-table-column align="center"
                         label="类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.route_type == '0'">目录</el-tag>
            <el-tag v-if="scope.row.route_type == '1'"
                    type="success">页面</el-tag>
            <el-tag v-if="scope.row.route_type == '2'"
                    type="info">按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="是否可见">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.route_show"
                       active-color="#42B983"
                       inactive-color="#CE6464">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="date"
                         label="创建时间">
        </el-table-column>
        <el-table-column align="center"
                         label="操作"
                         width="180">
          <template slot-scope="scope">
            <el-button type="primary"
                       plain
                       size="small"
                       style="margin-right: 8px;"
                       @click="edit(scope.row)">
              编辑
            </el-button>
            <el-button type="danger"
                       plain
                       size="small"
                       @click="del(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-drawer title="添加路由"
               :visible.sync="drawer">
      <div class="AddRoute-header">
        <el-form :model="form">
          <el-form-item label="请选择级别">
            <el-radio-group v-model="form.level">
              <el-radio :label="0">目录级别</el-radio>
              <el-radio :label="1">页面级别</el-radio>
              <el-radio :label="2">按钮级别</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <!-- 目录级别 -->
      <div class="AddRoute-container">
        <div class="catalogue"
             v-show="form.level === 0">
          <el-form :model="catalogue"
                   :rules="catalogueRules">
            <el-form-item label="父_title">
              <el-select v-model="catalogue.parrent_catalogue"
                         placeholder="请选择父级目录"
                         style="width:100%">
                <el-option label="权限分配"
                           :value="0"></el-option>
                <el-option label="角色分配"
                           :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="_path:"
                          prop="path">
              <el-input v-model="catalogue.path"></el-input>
            </el-form-item>
            <el-form-item label="_title:"
                          prop="title">
              <el-input v-model="catalogue.title"></el-input>
            </el-form-item>
            <el-form-item label="_icon:"
                          prop="icon">
              <el-input v-model="catalogue.icon"></el-input>
            </el-form-item>
            <el-form-item label="_hidden:"
                          prop="hidden">
              <el-input v-model="catalogue.hidden"></el-input>
            </el-form-item>
            <el-form-item style="text-align:center">
              <el-button type="primary">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 页面级别 -->
        <div class="pages"
             v-show="form.level === 1">
          <el-form :model="pages"
                   :rules="pagesRules">
            <el-form-item label="父_title"
                          prop="parrent_catalogue">
              <!-- <el-select v-model="pages.parrent_catalogue"
                         placeholder="请选择父级目录"
                         style="width:100%">
                <el-option label="剧目管理"
                           :value="0"></el-option>
                <el-option label="剧场管理"
                           :value="1"></el-option>
              </el-select> -->
              <el-cascader v-model="value"
                           :options="options"
                           :props="{ expandTrigger: 'hover' }"
                           @change="handleChange"
                           style="width:100%"></el-cascader>
            </el-form-item>
            <el-form-item label="_path:"
                          prop="path">
              <el-input v-model="pages.path"></el-input>
            </el-form-item>
            <el-form-item label="_title:"
                          prop="title">
              <el-input v-model="pages.title"></el-input>
            </el-form-item>
            <el-form-item label="_api:"
                          prop="api">
              <el-input v-model="pages.api"></el-input>
            </el-form-item>
            <el-form-item label="_hidden:"
                          prop="hidden">
              <el-input v-model="pages.hidden"></el-input>
            </el-form-item>

            <el-form-item style="text-align:center">
              <el-button type="primary">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 按钮级别 -->
        <div class="btn"
             v-show="form.level === 2">
          <el-form v-model="btn">
            <el-form-item label="请选择需管理的页面"
                          prop="pageId">
              <el-select v-model="btn.pageId"
                         placeholder="请选择父级目录"
                         style="width:100%">
                <el-option label="页面一"
                           :value="0"></el-option>
                <el-option label="页面二"
                           :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="_canAdd:"
                          prop="canAdd">
              <el-input v-model="btn.canAdd"></el-input>
            </el-form-item>
            <el-form-item label="_canDelete:"
                          prop="canDelete">
              <el-input v-model="btn.canDelete"></el-input>
            </el-form-item>
            <el-form-item label="_canEdit:"
                          prop="canEdit">
              <el-input v-model="btn.canEdit"></el-input>
            </el-form-item>
            <el-form-item style="text-align:center">
              <el-button type="primary">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import SearchForm from './search_form/SearchForm.vue'
export default {
  components: { SearchForm },
  data () {
    return {
      tableData: [
        {
          id: 1,
          route_title: '会员管理',
          route_icon: 'el-icon-menu',
          route_order: 9,
          route_api: 'wenhui/get/table/list',
          route_btn: '',
          route_url: '@/views/wenhuahui/user',
          route_type: 0,
          route_show: true,
          date: '2021-9-28',
          children: [
            {
              id: 11,
              route_title: '普通会员',
              route_icon: '',
              route_order: 8,
              route_api: 'wenhui/get/user/pu',
              route_btn: '',
              route_url: '@/views/wenhuahui/user/pu',
              route_type: 1,
              route_show: true,
              date: '2021-9-28',
              children: [
                {
                  id: 111,
                  route_title: '增加角色',
                  route_btn: 'add',
                  route_type: 2,
                  route_show: true,
                  date: '2021-9-28',
                },
                {
                  id: 112,
                  route_title: '编辑角色',
                  route_btn: 'edit',
                  route_type: 2,
                  route_show: true,
                  date: '2021-9-28',
                },
                {
                  id: 113,
                  route_title: '删除角色',
                  route_btn: 'delete',
                  route_type: 2,
                  route_show: false,
                  date: '2021-9-28',
                },
              ]
            },
            {
              id: 12,
              route_title: '文惠卡',
              route_icon: '',
              route_order: 8,
              route_api: 'wenhui/get/user/wenhua',
              route_btn: '',
              route_url: '@/views/wenhuahui/user/card',
              route_type: 1,
              route_show: true,
              date: '2021-9-28',
            },
          ]
        }
      ],
      value: [],
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则"
            },
            {
              value: "daohang",
              label: "导航"
            }
          ]
        }
      ],
      drawer: false,
      form: {
        level: ""
      },
      catalogue: {
        parrent_catalogue: "",
        path: "",
        title: "",
        icon: "",
        hidden: 0  //0表示false也就是显示，1表示为true也就是隐藏
      },
      pages: {
        parrent_catalogue: "",
        path: "",
        title: "",
        hidden: 0,  //0表示false也就是显示，1表示为true也就是隐藏,
        api: ''
      },
      btn: {
        canAdd: "",
        canDelete: "",
        canEdit: "",
        canDetail: ""
      },
      catalogueRules: {
        path: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
        title: [
          { required: true, message: "请输入路由显示标题", trigger: "blur" }
        ]
      },
      pagesRules: {
        parrent_catalogue: [
          { required: true, message: "请选择页面父目录", trigger: "blur" }
        ],
        path: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
        title: [
          { required: true, message: "请输入路由显示标题", trigger: "blur" }
        ]
      },

    };
  },
  methods: {
    handleClick (tab, event) {
      console.log(this.activeName);
    },
    handleSearchChange (value) {
      console.log(value)
    },
    addRoutes () {
      this.drawer = true;
    },
    handleChange () { },
    edit () { },
    del () { },
  }
};
</script>

<style scoped>
.AddRoute-container {
  padding: 30px;
}

.AddRoute-header {
  padding: 0 30px;
}
</style>
